<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 0
}

#map_canvas {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<c:set var="centerLong" value="${(country.maxLong+country.minLong)/2}" />
<c:set var="centerLat" value="${(country.maxLat+country.minLat)/2}" />
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(${centerLat}, ${centerLong});
    var capitalLatlng = new google.maps.LatLng(${country.capitalLat}, ${country.capitalLong});
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var infowindow = new google.maps.InfoWindow({
    	content: "${country.capital}"
    });    
    var marker = new google.maps.Marker({
    	position: capitalLatlng,
    	map: map,
    	title:"${country.capital}"
    });
    google.maps.event.addListener(marker, 'click', function() {
  	infowindow.open(map,marker);
    });
  }

</script>
<title>Country Controller</title>
</head>
<body onload="initialize()">
	<h1>${country.capital}: ( ${country.capitalLat}, ${country.capitalLong} )</h1>
	<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>